<template>
  <view style="padding: 30rpx 24rpx">
    <view style="font-size: 24rpx; color: #adadad; margin-bottom: 30rpx">共{{ total }}条记录</view>
    <view v-for="(item, idx) in list" :key="idx" style="margin-bottom: 25rpx" @click="onItem(item)">
      <view style="padding: 28rpx 24rpx; background: #ffffff; border-radius: 16rpx">
        <view style="display: flex; justify-content: space-between">
          <view>
            <view style="font-size: 32rpx; color: #222222">{{ item.customerName }}</view>
            <view style="font-size: 20rpx; display: flex; margin-top: 14rpx">
              <view class="tag" :style="{ color: item.status == 'NO_RECEIVE' ? '#f33c3c' : '#907c3a' }">
                {{ receiveStatus(item) }}
              </view>
              <view class="tag" style="color: #907c3a; margin-left: 12rpx">{{ item.customerType }}</view>
            </view>
            <view style="margin-top: 20rpx; line-height: 33rpx; font-size: 24rpx; color: #999999">
              {{ item.createTime }}
            </view>
          </view>
          <image
            style="width: 15rpx; height: 30rpx; margin-top: 61rpx"
            src="https://static.tospurfang.com/asset/right.png"
            mode="widthFix" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import dt from '@dt/dt'
  import { ref } from 'vue'
  import mgr from './biz'

  function receiveStatus(item) {
    return dt.dictInfo().__value('receiveStatus', item.status)
  }

  const [total, list] = [ref(), ref()]

  onLoad(() => {
    mgr.list().then((res) => {
      total.value = res.total
      list.value = res.list
    })
  })

  function onItem(item) {
    uni.navigateTo({ url: `/pages/customer/detail?id=${item.customerId}` })
  }
</script>
<style lang="scss" scoped>
  .tag {
    padding: 0 14rpx;
    line-height: 36rpx;
    background: #fff0c3;
    border-radius: 4rpx;
    width: fit-content;
  }
</style>
